import {Component} from "react";
import {AtButton, AtFloatLayout, AtNavBar} from 'taro-ui'
import "./index.less";
import CardComponent from "../../components/cardComponent";
import {Swiper, SwiperSlide} from 'swiper/react/swiper-react';
import 'swiper/swiper.less';
import Pulse from 'react-reveal/Pulse';
import Jello from 'react-reveal/Jello';
import Taro from '@tarojs/taro'
import {Image, View} from "@tarojs/components";
import {AtDrawer} from 'taro-ui'
import {AtList, AtListItem} from "taro-ui"
import {AtInput, AtForm} from 'taro-ui'
import CommentComponent from "../../components/commentComponent";
import Swing from 'react-reveal/Swing';
import Flip from 'react-reveal/Flip';
export default class Card extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.setState({
      action: false
    })
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
    this.setState({
      action: true
    })
  }


  state = {
    action: false,
    float: false,
    time: 1000,
    comment: '',
    startY: 0,
    endY: 0,
    show: false,
    editMessage: '',
    cardDetail: [
      {
        id: 1,
        imgSrc: 'https://img2.woyaogexing.com/2021/02/03/a53c447c6e97425c9bbb60421c5485f7!400x400.jpeg',
        textList: ['人理所当然的忘记', '是谁风里雨里一直默默守护在原地'],
        source: '--有人说--'
      }, {
        id: 2,
        imgSrc: 'https://img2.woyaogexing.com/2021/02/03/8c259ed1cbe24d85aaa6d3c03d01362d!400x400.webp',
        textList: ['总有一个人', '深深地让我觉得', '人间值得'],
        source: '--有人说--'
      }, {
        id: 3,
        imgSrc: 'https://img2.woyaogexing.com/2021/02/03/9f168fea823a4ad28d907463dc30e57f!400x400.webp',
        textList: ['人理所当然的忘记', '是谁风里雨里一直默默守护在原地'],
        source: '--有人说--'
      }],
    commentList: [
      {
        icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
        username: '良人秋可遇',
        time: '2022-05-22',
        comment: '人理所当然的忘记，谁风里雨里默默守护在原地'
      },
      {
        icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
        username: '良人秋可遇',
        time: '2022-05-22',
        comment: '啦啦啦'
      },
      {
        icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
        username: '良人秋可遇',
        time: '2022-05-22',
        comment: '嘿嘿嘿'
      },
      {
        icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
        username: '良人秋可遇',
        time: '2022-05-22',
        comment: '哈哈哈'
      },
      {
        icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
        username: '良人秋可遇',
        time: '2022-05-22',
        comment: '吼吼吼'
      },
    ]
  }


  render() {
    const floatLayOut =
      <AtFloatLayout className={'commentListShow'} isOpened={this.state.float} title="潺潺流云"
                     onClose={this.handleClose.bind(this)}>
        {this.state.commentList.map((item, index) => {
          return <CommentComponent key={index} icon={item.icon} username={item.username} time={item.time}
                                   comment={item.comment}/>
        })}
        <View className={'whiteSpace'}>没有更多啦</View>
      </AtFloatLayout>
    const inputArea = <AtInput
      className={'commentInputArea'}
      name='value'
      type='text'
      placeholder='说说你的想法吧'
      value={this.state.comment}
      onChange={this.changeComment.bind(this)}
    >
      <AtButton onClick={this.createComment.bind(this)} className={'commentBtn'}>发送</AtButton>
    </AtInput>
    const aside = <AtDrawer
      className={'at-drawer'}
      show={this.state.show}
      mask
      width={'60vw'}
    >
      <View>
        <View className={'asideBox'}>
          <View className={'user'} onClick={this.toUser.bind(this)}>
            <Image className={'userImage'}
                   src={'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg'}/>
            <View className={'userName'}>良人秋可遇</View>
          </View>
          <AtList className={'asideFooter'}>
            <AtListItem title='设置' onClick={this.handleClick}/>
            <AtListItem title='使用说明' onClick={this.handleClick}/>
            <AtListItem title='听云' onClick={() => Taro.eventCenter.trigger('changeModule')}/>
            <AtListItem title='退出登录' onClick={this.toSession.bind(this)}/>
          </AtList>
        </View>
      </View>
    </AtDrawer>

    return (
      <>
        <View className={'bigBox'} onTouchMove={this.handleTouchMove.bind(this)}
              onTouchStart={this.handleTouchStart.bind(this)}
              onTouchEnd={this.handleTouchEnd.bind(this)}>
          <AtNavBar
            key={'index'}
            onClickLeftIcon={() => this.setState({show: true})}
            color='#000000'
            title='有风来过'
            leftIconType='bullet-list'
          />
          <Pulse duration={this.state.time}><Swing when={this.state.action} duration={this.state.time}>
            <Swiper
              className={'swiper-android'}
              spaceBetween={30}
              slidesPerView={1}
            >

              {this.state.cardDetail.map((item, index) =>
                (<SwiperSlide onClick={() => this.clickCard(item.id)} key={index}><CardComponent key={index}
                                                                                                 imgSrc={item.imgSrc}
                                                                                                 textList={item.textList}
                                                                                                 source={item.source}/></SwiperSlide>)
              )}
            </Swiper>
          </Swing>
          </Pulse>
        </View>
        {aside}
        {floatLayOut}
        {this.state.float === true ? inputArea : <></>}
      </>
    );
  }

  changeComment(value) {
    this
      .setState({
        comment: value
      })

    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }

  createComment() {
    const comment = this.state.comment
    if (comment === '') return
    let newCommentList = this.state.commentList
    newCommentList.push(
      {
        comment: comment,
        time: new Date().toISOString().substr(0, 10),
        icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
        username: '良人秋可遇'
      }
    )
    this.setState({
      commentList: newCommentList,
      comment: ''
    })
  }

  toSession() {
    Taro.navigateTo({
      url: '/pages/session/index'
    })
  }

  toUser() {
    Taro.redirectTo({
      url: '/pages/my/index'
    })
  }

  handleTouchStart = (e) => {
    this.setState({
      startY: e.touches[0].clientY,
      show: false
    })
  }
  ;
  /*手在屏幕上移动*/
  handleTouchMove = (e) => {
    this.setState({
      endY: e.touches[0].clientY
    })
  }
  ;
  /*手离开屏幕*/
  handleTouchEnd = (e) => {
    // 获取滑动范围
    if (this.state.startY > 0 && this.state.endY > 0) {
      let distance = Math.abs(this.state.startY - this.state.endY);
      if (distance > 100 && this.state.startY > this.state.endY) {
        this.setState({
          action: true
        })
        let timer = setTimeout(() => {
          Taro.eventCenter.trigger('changeModule')
          clearTimeout(timer)
        }, this.state.time)
      }
    }
    this.setState({
      startY: -1,
      endY: -1
    })
  }
  ;
  handleClose = () => {
    this.setState({
      float: false
    })
  }
  clickCard = (id) => {
    this.setState({
      comment: id,
      float: true
    })
  }


}
